<template>
  <div class="my_manage">
    <div class="cont_header">个人中心</div>
    <div class="avatar_name">
      <div class="avatar">
        <img src="@/assets/image/woman.png" alt="">
        <!-- <img src="@/assets/image/man.png" alt=""> -->
      </div>
      <div class="name1">
        <div class="position">职位：财税专员</div>
        <div>姓名：顾汐</div>
      </div>
    </div>
    <div class="my_header">
      <div class="item" @click="goTo('commissioner')">
        <img src="@/assets/image/my/grzl.png" alt="">
        <div>个人资料</div>
      </div>
      <div class="item" @click="goTo('balance')">
        <img src="@/assets/image/my/zhye.png" alt="">
        <div>账户余额</div>
      </div>
      <div class="item" @click="goTo('buyers')">
        <img src="@/assets/image/my/kpxx.png" alt="">
        <div>开票信息</div>
      </div>
      <div class="item" @click="goTo('unit')">
        <img src="@/assets/image/my/wldw.png" alt="">
        <div>往来单位</div>
      </div>
      <div class="item" @click="goTo('companyData')">
        <img src="@/assets/image/my/gszl.png" alt="">
        <div>公司资料</div>
      </div>
      <div class="item" @click="goTo('express')">
        <img src="@/assets/image/my/kdjc.png" alt="">
        <div>快递寄出</div>
      </div>
      <div class="item" @click="goTo('application')">
        <img src="@/assets/image/my/kpsq.png" alt="">
        <div>开票申请</div>
      </div>
      <div class="item" @click="goTo('upload')">
        <img src="@/assets/image/my/upload.png" alt="">
        <div>财务数据上传</div>
      </div>
      <div class="item" @click="goTo('financialSheet')">
        <img src="@/assets/image/my/bb.png" alt="">
        <div>财税报表</div>
      </div>
      <div class="item" @click="goTo('financialData')">
        <img src="@/assets/image/my/cwsj.png" alt="">
        <div>财务数据</div>
      </div>
      <div class="item" @click="goTo('buyers')">
        <img src="@/assets/image/my/fptt.png" alt="">
        <div>发票抬头</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "list",
  data() {
    return {
      name: "顾汐",
    };
  },
  created() {},
  methods: {
    goTo(text) {
      this.$router.push("/" + text).catch((err) => {
        err;
      });
    },
  },
};
</script>

<style scoped lang="less">
.my_manage {
  background: linear-gradient(180deg, #a5f79d 0%, #d3f7ee 99%);
  height: 100vh;
  .cont_header {
    background-color: #07c160;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    color: #fff;
  }
  .my_header {
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 30vw;
      height: 25vw;
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 1.6vw;
      box-shadow: 0px -2px 8px 1px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      img {
        width: 3rem;
        height: 3rem;
        margin-bottom: .8rem;
      }
      div{
        font-size: .8rem;
      }
    }
  }
}

.avatar_name {
  display: flex;
  height: 10rem;
  padding: 1rem 0;
  box-sizing: border-box;
  margin-bottom: 2rem;
  background-color: #d3f8ec;
  width: 96vw;
  margin: 1rem auto;
  box-shadow: 0px -2px 8px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  .avatar {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 6rem;
      height: 6rem;
      border-radius: 50%;
    }
  }
  .name1 {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .position {
      font-weight: bold;
      color: #333;
    }
  }
}
</style>